<template>
  <div class="cyy-low">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="个人库" name="first">
      <div class="cyy_low_a">
        
            <div class="cyy_low_1_2" style="margin:0 400px 0 20px">
              <my-search width="266" ph="搜索常用语"></my-search>
            </div>
            <div class="cyy_low_1_3" style="margin-right:10px">
              <my-button :color="true">添加分类</my-button>
            </div>
            <div class="cyy_low_1_3" style="margin-right:10px">
              <my-button :color="true">添加常用语</my-button>
            </div>
            <div class="cyy_low_1_3">
              <my-button color="none">导入常用语</my-button>
            </div>
      
    </div>
        <el-collapse accordion>
          <el-collapse-item title="欢迎语">
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
          </el-collapse-item>
          <el-collapse-item title="业务常用用语">
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="公共库" name="second">
         <div class="cyy_low_a">
        
            <div class="cyy_low_1_2" style="margin:0 400px 0 20px">
              <my-search width="266" ph="搜索常用语"></my-search>
            </div>
            <div class="cyy_low_1_3" style="margin-right:10px">
              <my-button :color="true">添加分类</my-button>
            </div>
            <div class="cyy_low_1_3" style="margin-right:10px">
              <my-button :color="true">添加常用语</my-button>
            </div>
            <div class="cyy_low_1_3">
              <my-button color="none">导入常用语</my-button>
            </div>
      
    </div>
       
        <el-collapse accordion>
          <el-collapse-item title="生鲜业务常用语">
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
          </el-collapse-item>
          <el-collapse-item title="推广常用语">
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
            <div class="cyy-low_title">你好，请问有什么可以帮您？</div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  
  </div>
</template>
<script>
import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
export default {
   components: {
    MySearch,
    MyButton,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style>
.cyy-low {
  width: 1040px;
  height: 538px;
  margin: 0;
  border-radius: 4px;
  font-weight: 400;
  background-color: #fff;
}
/* 导航 */
.cyy-low .el-tabs__nav {
  padding-top: 10px;
  padding-bottom: 14px;
  margin-left: 20px;
}
.cyy-low .el-tabs__nav-scroll .el-tabs__active-bar {
  height: 3px;
  background-color: #4d4dff;
}
.cyy-low .el-tabs__header .el-tabs__nav-wrap::after {
  width: 1000px;
  height: 0.5px;
  margin-left: 20px;
  
  
}

/* 常用语部分 */
.cyy-low .el-collapse{
  margin-left: 20px;
}
.cyy-low .el-tabs__content {
  position: relative;
  /* top: 70px; */
}
.cyy-low .el-collapse-item .el-collapse-item__header {
  font-size: 14px;
  font-weight: 400;
}
.cyy-low .el-collapse-item__wrap .el-collapse-item__content {
  padding: 0;
}
.cyy-low_title {
  height: 38px;
  
  border-top: solid 1px #ebeef5;
  /* text-align: left; */
  line-height: 40px;
}
.cyy_low_a {
  height: 60px;

  display: flex;
  line-height: 50px;

}

.cyy-low  input:focus {
  border: solid;
  border-width: 0.5px;
  border-color: #3385ff;
}

</style>